/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, WebView, Platform, BackHandler, Dimensions, Image, ScrollView} from 'react-native';

import ToolbarComponent from '../../component/ToolbarComponent';

import Common from '../../component/common';

import Share from '../../component/share';

import Loading from '../../component/loading';

const totalWidth = Dimensions.get('window').width;

const os = Platform.OS;

export default class Article extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isCollection: false,
    };
  }
  componentWillMount(){
    if (os === 'android') {
      BackHandler.addEventListener('hardwareBackPress', () => Common.onBack(this,{"id":this.props.name.id,"type": this.props.did,"collectionStatus":this.collection == this.state.isCollection}));
    }
    Common.isCollection({id:this.props.name.id, type: this.props.did}, () => {
      this.setState({isCollection: true});
      this.collection = true;
    }, () => {
      this.setState({isCollection: false});
      this.collection = false;
    });
  }
  componentWillUnmount() {
    if (os === 'android') {
      BackHandler.removeEventListener('hardwareBackPress', () => Common.onBack(this,{"id":this.props.name.id,"type":this.props.did,"collectionStatus": this.collection == this.state.isCollection}));
    }
  }
  render() {
    var collectionIcon = this.state.isCollection?require("../../images/collection/Collectionon.png"):require("../../images/collection/Collectionoff.png");
    return (
      <View style={{flex: 1}}>
        <ToolbarComponent
          leftItem={{
            title: 'Back',
            layout: 'icon',
            icon: require("../../images/back.png"),
            onPress: () => {
              Common.onBack(this,{"id":this.props.name.id,"type":this.props.did,"collectionStatus": this.collection == this.state.isCollection});
            },
          }}
          extraItem={{
            title: 'Collection',
            layout: 'icon',
            icon: collectionIcon,
            onPress: () => {
              if(this.state.isCollection){
                Common.deleteCollection({id: this.props.name.id, type: this.props.did},() => {
                  this.setState({isCollection: false});
                });
              }else{
                Common.addCollection({id: this.props.name.id, type: this.props.did},() => {
                  this.setState({isCollection: true});
                });
              }
            },
          }}
          // rightItem={{
          //   title: 'Share',
          //   layout: 'icon',
          //   icon: require("../../images/share/share.png"),
          //   onPress: () => {
          //     if(this.refs.share){
          //       this.refs.share.show(this.location, this.props.name.url);
          //     }
          //   },
          // }}
        >
          <View style={styles.toolbarV}>
            <Text style={styles.toolbarT} numberOfLines={1}>{this.props.name.title}</Text>
          </View>
        </ToolbarComponent>
        <WebView
          ref={(e) => this.location = e }
          source={{ uri: this.props.name.url}}
          javaScriptEnabled={true}
          domStorageEnabled={true}
          startInLoadingState={true}
          renderLoading={() => {return (<Loading />)}}
        />
        <Share ref="share" />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f6f6f6',
  },
  page: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  toolbarV: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  toolbarT: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 20
  },
  shareBox: {
    left: 0,
    borderRadius: 0,
    
  },
  share: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginHorizontal: totalWidth*0.037,
    marginTop: totalWidth*0.066,
    borderBottomWidth: 1,
    borderBottomColor: '#d6d6d6'
  },
  shareItem: {
    marginVertical: totalWidth*0.035,
    marginHorizontal: totalWidth*0.01,
    height: totalWidth*0.21,
    width: totalWidth*0.21,
    justifyContent: 'center',
    alignItems: 'center'
  },
  shareItemT: {
    marginTop: 5,
    color: '#242424',
  },
  cancel: {
    height: totalWidth*0.2,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 0,
  },
  cancelT: {
    fontSize: 20,
    color: '#5b6878'
  }
})